{% extends 'base/base.html' %}
{% load static %}

{% block title %}申请超市合作 - 妙趣拾光锦盒{% endblock %}

{% block extra_css %}
<style>
    .apply-section {
        background-color: #f8f9fa;
        border-radius: 15px;
        padding: 40px;
        margin-bottom: 30px;
    }
    
    .form-label {
        font-weight: 500;
        margin-bottom: 8px;
    }
    
    .required-field::after {
        content: "*";
        color: #dc3545;
        margin-left: 4px;
    }
    
    .form-control {
        border-radius: 10px;
        padding: 12px 15px;
        border: 1px solid #ced4da;
    }
    
    .form-control:focus {
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
    }
    
    .map-container {
        height: 400px;
        border-radius: 15px;
        overflow: hidden;
        margin-bottom: 20px;
    }
    
    .steps-section {
        margin-bottom: 40px;
    }
    
    .step-item {
        text-align: center;
        padding: 15px;
    }
    
    .step-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #e9ecef;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        font-size: 1.5rem;
        color: #0d6efd;
    }
    
    .highlight-box {
        background-color: #e9f7fe;
        border-left: 4px solid #0d6efd;
        padding: 15px;
        border-radius: 5px;
        margin-bottom: 20px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-5">
    <!-- 面包屑导航 -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'blindbox:index' %}">首页</a></li>
            <li class="breadcrumb-item"><a href="{% url 'market:list' %}">合作超市</a></li>
            <li class="breadcrumb-item active" aria-current="page">申请合作</li>
        </ol>
    </nav>

    <!-- 标题 -->
    <div class="text-center mb-5">
        <h1 class="display-5 mb-3">申请超市合作</h1>
        <p class="lead text-muted">加入妙趣拾光锦盒合作伙伴，让您的超市焕发新活力！</p>
    </div>
    
    <!-- 申请步骤 -->
    <div class="steps-section">
        <div class="row">
            <div class="col-md-3">
                <div class="step-item">
                    <div class="step-icon">
                        <i class="fas fa-file-alt"></i>
                    </div>
                    <h5>提交申请</h5>
                    <p class="text-muted">填写您的超市信息并提交申请</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="step-item">
                    <div class="step-icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <h5>审核批准</h5>
                    <p class="text-muted">我们将在3个工作日内完成审核</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="step-item">
                    <div class="step-icon">
                        <i class="fas fa-handshake"></i>
                    </div>
                    <h5>签订协议</h5>
                    <p class="text-muted">双方确认并签订合作协议</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="step-item">
                    <div class="step-icon">
                        <i class="fas fa-store"></i>
                    </div>
                    <h5>开始合作</h5>
                    <p class="text-muted">您的超市将在平台上线</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 提示信息 -->
    <div class="highlight-box mb-5">
        <h5><i class="fas fa-info-circle me-2"></i>申请须知</h5>
        <p class="mb-0">完成申请后，我们的工作人员将会与您联系，进一步确认合作细节。请确保您提供的联系方式准确无误。</p>
    </div>
    
    <!-- 申请表单 -->
    <div class="row">
        <div class="col-md-8">
            <div class="apply-section shadow-sm">
                <h3 class="mb-4">超市信息</h3>
                
                <!-- 显示消息 -->
                {% if messages %}
                    {% for message in messages %}
                        <div class="alert alert-{{ message.tags }}" role="alert">
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
                
                <form method="post" action="{% url 'market:apply' %}">
                    {% csrf_token %}
                    
                    <div class="mb-3">
                        <label for="name" class="form-label required-field">超市名称</label>
                        <input type="text" class="form-control" id="name" name="name" value="{{ form_data.name|default:'' }}" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="address" class="form-label required-field">详细地址</label>
                        <input type="text" class="form-control" id="address" name="address" value="{{ form_data.address|default:'' }}" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="business_hours" class="form-label">营业时间</label>
                        <input type="text" class="form-control" id="business_hours" name="business_hours" placeholder="例如：周一至周日 09:00-22:00" value="{{ form_data.business_hours|default:'' }}">
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="latitude" class="form-label">纬度</label>
                            <input type="text" class="form-control" id="latitude" name="latitude" value="{{ form_data.latitude|default:'' }}">
                            <small class="text-muted">在地图上选择位置自动填充</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="longitude" class="form-label">经度</label>
                            <input type="text" class="form-control" id="longitude" name="longitude" value="{{ form_data.longitude|default:'' }}">
                            <small class="text-muted">在地图上选择位置自动填充</small>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">选择超市位置</label>
                        <div id="mapContainer" class="map-container"></div>
                        <small class="text-muted">点击地图选择您的超市位置</small>
                    </div>
                    
                    <h3 class="mb-4 mt-5">联系信息</h3>
                    
                    <div class="mb-3">
                        <label for="contact_name" class="form-label required-field">联系人姓名</label>
                        <input type="text" class="form-control" id="contact_name" name="contact_name" value="{{ form_data.contact_name|default:'' }}" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="contact_phone" class="form-label required-field">联系电话</label>
                        <input type="tel" class="form-control" id="contact_phone" name="contact_phone" value="{{ form_data.contact_phone|default:'' }}" required>
                    </div>
                    
                    <div class="mb-4">
                        <label for="remark" class="form-label">备注说明</label>
                        <textarea class="form-control" id="remark" name="remark" rows="3" placeholder="请填写其他需要说明的事项">{{ form_data.remark|default:'' }}</textarea>
                    </div>
                    
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg">提交申请</button>
                    </div>
                </form>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0"><i class="fas fa-star me-2"></i>合作优势</h4>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li class="mb-3"><i class="fas fa-check-circle text-primary me-2"></i> 增加超市客流量和曝光度</li>
                        <li class="mb-3"><i class="fas fa-check-circle text-primary me-2"></i> 无需额外成本，按销售分成</li>
                        <li class="mb-3"><i class="fas fa-check-circle text-primary me-2"></i> 提升消费者购物体验</li>
                        <li class="mb-3"><i class="fas fa-check-circle text-primary me-2"></i> 获得专业的运营支持</li>
                        <li class="mb-3"><i class="fas fa-check-circle text-primary me-2"></i> 更多增值服务和活动支持</li>
                    </ul>
                </div>
            </div>
            
            <div class="card shadow-sm">
                <div class="card-header bg-light">
                    <h4 class="mb-0"><i class="fas fa-question-circle me-2"></i>常见问题</h4>
                </div>
                <div class="card-body">
                    <div class="accordion" id="faqAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                    合作流程需要多长时间？
                                </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    从提交申请到正式上线，通常需要1-2周的时间。我们会尽快审核您的申请，并安排工作人员与您联系。
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingTwo">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    需要支付什么费用？
                                </button>
                            </h2>
                            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    合作不需要前期投入费用，我们采用销售分成模式。具体分成比例将在合作洽谈时确定。
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingThree">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                    如何获取更多信息？
                                </button>
                            </h2>
                            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    您可以通过客服电话 <a href="tel:400-123-4567">400-123-4567</a> 或邮箱 <a href="mailto:partner@example.com">partner@example.com</a> 联系我们，获取更多合作信息。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=b7fb3f07380c4c27224ed3136b63dc04"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 初始化地图
    var map = new AMap.Map('mapContainer', {
        zoom: 12,
        viewMode: '2D'
    });
    
    // 添加地图控件
    map.plugin(['AMap.ToolBar', 'AMap.Scale'], function(){
        map.addControl(new AMap.ToolBar());
        map.addControl(new AMap.Scale());
    });
    
    // 初始化标记
    var marker = null;
    
    // 尝试获取用户当前位置
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var lat = position.coords.latitude;
            var lng = position.coords.longitude;
            
            // 设置地图中心
            map.setCenter([lng, lat]);
            
            // 如果表单中没有坐标值，则设置当前位置
            var latInput = document.getElementById('latitude');
            var lngInput = document.getElementById('longitude');
            
            if (!latInput.value && !lngInput.value) {
                latInput.value = lat;
                lngInput.value = lng;
                
                // 添加标记
                marker = new AMap.Marker({
                    position: [lng, lat],
                    draggable: true
                });
                marker.setMap(map);
                
                // 拖动标记时更新坐标
                marker.on('dragend', updateCoordinates);
            }
        });
    }
    
    // 如果表单中已有坐标，则显示标记
    var latInput = document.getElementById('latitude');
    var lngInput = document.getElementById('longitude');
    
    if (latInput.value && lngInput.value) {
        var lat = parseFloat(latInput.value);
        var lng = parseFloat(lngInput.value);
        
        // 设置地图中心
        map.setCenter([lng, lat]);
        
        // 添加标记
        marker = new AMap.Marker({
            position: [lng, lat],
            draggable: true
        });
        marker.setMap(map);
        
        // 拖动标记时更新坐标
        marker.on('dragend', updateCoordinates);
    }
    
    // 点击地图添加标记
    map.on('click', function(e) {
        var lat = e.lnglat.getLat();
        var lng = e.lnglat.getLng();
        
        // 更新表单
        document.getElementById('latitude').value = lat;
        document.getElementById('longitude').value = lng;
        
        // 添加或移动标记
        if (marker) {
            marker.setPosition([lng, lat]);
        } else {
            marker = new AMap.Marker({
                position: [lng, lat],
                draggable: true
            });
            marker.setMap(map);
            
            // 拖动标记时更新坐标
            marker.on('dragend', updateCoordinates);
        }
    });
    
    // 更新坐标函数
    function updateCoordinates(e) {
        var lat = e.lnglat.getLat();
        var lng = e.lnglat.getLng();
        
        document.getElementById('latitude').value = lat;
        document.getElementById('longitude').value = lng;
    }
});
</script>
{% endblock %} 